@keyframes pie-spin {
    to {
        transform: rotate(180deg);
    }
}

@keyframes pie-bg {
    50% {
        background-color: #655;
    }
}

.readingNotes-cssSecret-02{
    .exp {
        margin: 25px 0;
        padding: 25px 0;
        background: #eee;
        border-radius: 4px;
        >div {
            width: 310px;
            height: 140px;
            margin: 0 auto;
            background: #fff;
            text-align: center;
            line-height: 80px;
        }
    }

    div.ellipse-1>div {
        height: 110px;
        background-color: #58a;
        border-radius: 155px / 60px;
    }

    div.ellipse-2>div {
        background-color: #58a;
        border-radius: 50% / 100% 100% 0 0;
    }

    div.ellipse-3>div {
        width: 100px;
        background-color: #58a;
        border-radius: 100% 0 0 100%/ 50%;
    }

    div.ellipse-4>div {
        width: 200px;
        background-color: #58a;
        border-radius: 100% 0 0/ 100% 0 0;
    }

    div.paralle-1 {
        overflow: hidden;
    }

    div.paralle-1>div {
        width: 260px;
        background-color: #58a;
        transform: skewX(-45deg);
    }

    div.paralle-1>div>div {
        height: 100%;
        transform: skewX(45deg);
        color: #fff;
        line-height: 120px;
    }

    div.paralle-2>div {
        position: relative;
        z-index: 0;
        width: 260px;
        background-color: transparent;
        line-height: 120px;
        color: #fff;
    }

    div.paralle-2>div::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: skewX(-45deg);
        z-index: -1;
        background-color: #58a;
    }

    div.diamond-1 {
        height: 240px;
        padding: 45px 0 30px;
    }

    div.diamond-1>div {
        width: 150px !important;
        height: 150px;
        transform: rotate(45deg);
        overflow: hidden;
    }

    div.diamond-1>div>img {
        width: 100%;
        height: 100%;
        transform: rotate(-45deg) scale(1.42);
    }

    div.diamond-2 {
        text-align: center;
        height: 190px;
    }

    div.diamond-2>img {
        width: 150px;
        height: 150px;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
        transition: clip-path 1s;
    }

    div.diamond-2>img:hover {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    div.cuttingAngle-1>div {
        background: #58a;
        background: linear-gradient(-45deg, transparent 15px, #58a 15px);
    }

    div.cuttingAngle-2>div {
        background: #58a;
        background: linear-gradient(-45deg, transparent 15px, #58a 15px) top right,
            linear-gradient(45deg, transparent 15px, #58a 15px) top left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
    }

    div.cuttingAngle-3>div {
        background: #58a;
        background: linear-gradient(-45deg, transparent 15px, #58a 15px) bottom right,
            linear-gradient(45deg, transparent 15px, #58a 15px) bottom left,
            linear-gradient(-135deg, transparent 15px, #58a 15px) top right,
            linear-gradient(135deg, transparent 15px, #58a 15px) top left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }

    div.cuttingAngle-4>div {
        background: #58a;
        background: radial-gradient(circle at top left, transparent 15px, #58a 15px) top left,
            radial-gradient(circle at bottom left, transparent 15px, #58a 15px) bottom left,
            radial-gradient(circle at top right, transparent 15px, #58a 15px) top right,
            radial-gradient(circle at bottom right, transparent 15px, #58a 15px) bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }

    div.cuttingAngle-5>div {
        border: 20px solid #58a;
        border-image: 1 url('data:image/svg+xml,\
                              <svg xmlns="http://www.w3.org/2000/svg"\
                                    width="3" height="3" fill="%2358a">\
                               <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
                                    </svg>');
        background: #58a;
        background-clip: padding-box;
    }

    div.cuttingAngle-6 {
        text-align: center;
        height: 190px;
        >img {
            width: 150px;
            height: 150px;
            clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px, 20px 0);
        }
    }

    div.tab-1>div {
        position: relative;
        padding: 0.5em 1em 0.35em;
        color: white;
        z-index: 0;
        background: transparent;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background: #58a;
            transform-origin: bottom;
            transform: scaleY(2.2) perspective(0.5em) rotateX(5deg);
        }
    }

    div.pie {
        >div {
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: yellowgreen;
            background-image: linear-gradient(to right, transparent 50%, #655 50%);
            overflow: hidden;

            &:before {
                content: "";
                display: block;
                margin-left: 50%;
                height: 100%;
                transform-origin: 0 50%;
                border-radius: 0 100% 100% 0 / 50%;
            }
        }
    }

    div.pie-1 {
        >div {
            &:before {
                background-color: inherit;
                transform: rotate(72deg);
            }
        }
    }

    div.pie-2 {
        >div {
            &:before {
                background-color: #655;
                transform: rotate(36deg);
            }
        }
    }

    div.pie-3,div.pie-4 {
        >div {
            &:before {
                background-color: inherit;
                animation: pie-spin 3s linear infinite, pie-bg 6s step-end infinite;
            }
        }
    }

    div.pie-4 {
        >div {
            &:before {
                animation: pie-spin 50s linear infinite, pie-bg 100s step-end infinite;
                animation-play-state: paused;
                animation-delay: inherit;
            }
        }
    }

    div.shadow-1>div {
        background: #58a;
        box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
    }

    div.shadow-2>div {
        background: #58a;
        box-shadow: 0 8px 4px -4px rgba(0, 0, 0, 0.5);
    }

    div.shadow-3>div {
        background: #58a;
        box-shadow: 8px 0 4px -4px rgba(0, 0, 0, 0.5), -8px 0 4px -4px rgba(0, 0, 0, 0.5);
    }

    div.filter-1>div {
        filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
    }

    div.filter-2 {
        >img {
            display: block;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            filter: sepia(1) saturate(4) hue-rotate(295deg);
            transition: 0.5s filter;

            &:hover {
                filter: none;
            }
        }
    }

    div.filter-3 {
        >div {
            width: 150px !important;
            height: 150px;
            background: hsl(335, 100%, 50%);

            >img {
                width: 100%;
                height: 100%;
                mix-blend-mode: luminosity;
            }
        }
    }

    div.filter-4 {
        >div {
            width: 150px !important;
            height: 150px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-blend-mode: luminosity;
            transition: 0.5s background-color;
            &:hover {
                background-color: transparent;
            }
        }
    }

    div.angle-1 {
        >div {
            height: 150px;
            background: #58a;
            background: linear-gradient(to left bottom,transparent 50%,rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 2em 2em, linear-gradient(-135deg, transparent 1.414em, #58a 0);
        }
    }

    div.angle-2 {
        >div {
            height: 150px;
            background: #58a;
            background: linear-gradient(to left bottom,transparent 50%,rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 3em 1.73em, linear-gradient(-150deg, transparent 1.5em, #58a 0);
        }
    }

    div.angle-3 {
        >div {
            position: relative;
            height: 150px;
            background: #58a;
            background: linear-gradient(-150deg, transparent 1.5em, #58a 0);

            &:before {
                content: "";
                position: absolute;
                width: 3em;
                height: 1.73em;
                top: 0;
                right: 0;
                background: linear-gradient(to left bottom, transparent 50%,rgba(0, 0, 0, 0.4) 0);
            }
        }
    }

    div.angle-4 {
        >div {
            &:before {
                width: 1.73em;
                height: 3em;
                transform: translateY(-1.3em) rotate(-30deg);
                transform-origin: bottom right;
            }
        }
    }

    div.angle-5 {
        >div {
            border-radius: 0.5em;
            &:before {
                border-bottom-left-radius: inherit;
                box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
            }
        }
    }
}